<template>
  <div class="custom-tree-container">
    <div class="block">
      <!-- <p>使用 scoped slot</p> -->
      <el-tree
        :data="data"
        node-key="catId"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedKey"
      >
        <div
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <div>{{ data.name }}</div>
          <div>
            <el-button
              type="text"
              size="small "
              @click="() => append(node, data)"
              v-if="node.level <= 2"
            >
              <i
                class="el-icon-plus"
                style="font-size: 14px; color:#66696B;"
              ></i>
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="() => remove(node, data)"
              v-if="node.childNodes.length == 0"
            >
              <i
                class="el-icon-delete"
                style="font-size: 14px; color:#66696B;"
              ></i>
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="() => edit(node, data)"
            >
              <i
                class="el-icon-edit"
                style="font-size: 14px; color:#66696B;"
              ></i>
            </el-button>
          </div>
        </div>
      </el-tree>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="category"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="分类名称"
            prop="name"
          >
            <el-input
              v-model="category.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="分类排序">
            <el-input-number
              v-model="category.sort"
              :min="0"
              :max="10"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="分类图标">
            <el-input
              v-model="category.icon"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="计量单位">
            <el-input
              v-model="category.productUnit"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input
              v-model="category.productCount"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const data = []
    return {
      data: JSON.parse(JSON.stringify(data)),
      // data: JSON.parse(JSON.stringify(data))
      expandedKey: [],
      dialogVisible: false,
      category: {
        catId: '',
        name: '',
        parentCid: 0,
        catLevel: 1,
        showStatus: 1,
        sort: 0,
        icon: '',
        productUnit: '',
        productCount: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      title: '',
      dialogType: ''
    }
  },

  methods: {
    // 图标添加点击事件
    append (node, data) {
      this.dialogVisible = true
      this.title = '添加分类'
      this.dialogType = 'add'
      this.category.catId = ''
      this.category.name = ''
      this.category.parentCid = data.catId
      this.category.catLevel = parseInt(data.catLevel) + 1
      this.category.showStatus = 1
      this.category.sort = 0
      this.category.icon = ''
      this.category.productUnit = ''
      this.category.productCount = ''
    },

    // 添加分类对话框确定点击事件
    addCategory () {
      this.$http({
        url: this.$http.adornUrl('/product/category/save'),
        method: 'post',
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        this.$message({
          type: 'success',
          message: '菜单保存成功!'
        })
        this.dialogVisible = false // 关闭对话框
        this.getListTree() // 刷新数据
        this.expandedKey = [this.category.parentCid] // 设置默认展开的菜单
      })
    },

    // 图标修改点击事件
    edit (node, data) {
      this.dialogVisible = true
      this.title = '修改分类'
      this.dialogType = 'edit'

      // -------------------------------
      // 回显直接用上次的节点信息，有可能会造成数据不同步，应该从数据库中获取最新信息
      // this.category.name = data.name
      // this.category.sort = data.sort
      // this.category.icon = data.icon
      // this.category.productUnit = data.productUnit
      // this.category.productCount = data.productCount
      // this.category.catId = data.catId

      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        // 回显
        this.category.name = data.data.name
        this.category.sort = data.data.sort
        this.category.icon = data.data.icon
        this.category.productUnit = data.data.productUnit
        this.category.productCount = data.data.productCount
        this.category.catId = data.data.catId
        this.category.parentCid = data.data.parentCid
      })
    },

    // 修改分类对话框确定点击事件
    updateCategory () {
      var { catId, name, sort, icon, productUnit, productCount } = this.category
      this.$http({
        url: this.$http.adornUrl('/product/category/update'),
        method: 'post',
        data: this.$http.adornData({ catId, name, sort, icon, productUnit, productCount }, false)
      }).then(({ data }) => {
        this.$message({
          type: 'success',
          message: '菜单修改成功!'
        })
        this.dialogVisible = false // 关闭对话框
        this.getListTree() // 刷新数据
        this.expandedKey = [this.category.parentCid] // 设置默认展开的菜单
      })
    },

    // 对话框点击事件
    submit () {
      if (this.dialogType === 'add') {
        this.addCategory()
      } else {
        this.updateCategory()
      }
    },

    // 分类删除事件
    remove (node, data) {
      this.$confirm(`删除【${data.name}】菜单, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = [data.catId]
        this.$http({
          url: this.$http.adornUrl('/product/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getListTree()
          this.expandedKey = [node.parent.data.catId] // 设置默认展开的菜单
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 获取分类层级树
    getListTree () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        this.data = data.data
      })
    }

  },

  created () {
    this.getListTree()
  }
}
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #66696b;
  padding-right: 10px;
  padding-left: 10px;
  height: 40px;
  background-color: #f3f3f4;
}
.el-tree-node__content {
  height: 50px;
  line-height: 50px;
  /* width: 800px; */
}
</style>